<template>
  <div class="setting-wrapper">
    <el-row :gutter="0">
      <el-col :span="8">
        <div class="setting-headbar setting-headbar-left">
          <div>注释：<b>天气概率</b></div>
        </div>
        <el-table
          :data="weatherOptions.weatherProbability"
          style="width: 100%"
          :height="tableMaxHeight"
        >
          <el-table-column
            prop="areaType"
            label="类/值"
            width="70"
            align="right"
          >
            <template #default="scope">
              {{ scope.row.areaType }} / {{ scope.row.value }}
            </template>
          </el-table-column>
          <el-table-column prop="label" label="选项名称" />
        </el-table>
      </el-col>
      <el-col :span="8">
        <div class="setting-headbar setting-headbar-middle">
          <div>注释：<b>天气范围</b></div>
        </div>
        <el-table
          :data="weatherOptions.weatherCoverage"
          style="width: 100%"
          :max-height="tableMaxHeight"
        >
          <el-table-column
            prop="areaType"
            label="类/值"
            width="70"
            align="right"
          >
            <template #default="scope">
              {{ scope.row.areaType }} / {{ scope.row.value }}
            </template>
          </el-table-column>
          <el-table-column prop="label" label="选项名称" />
        </el-table>
      </el-col>
      <el-col :span="8">
        <div class="setting-headbar setting-headbar-right">
          <div>注释：<b>天气强度</b></div>
        </div>
        <el-table
          :data="weatherOptions.weatherIntensity"
          style="width: 100%"
          :max-height="tableMaxHeight"
        >
          <el-table-column
            prop="areaType"
            label="类/值"
            width="70"
            align="right"
          >
            <template #default="scope">
              {{ scope.row.areaType }} / {{ scope.row.value }}
            </template>
          </el-table-column>
          <el-table-column prop="label" label="选项名称" />
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, computed, nextTick, onMounted, onUnmounted } from "vue";
import useCapacityStore from "@/store/capacity.js";
const capacityStore = useCapacityStore();
const weatherOptions = computed(() => capacityStore.weatherOptions);

const tableMaxHeight = ref("150");

const handleClick = (row, column, event) => {
  console.log("handleClick", row, column, event);
};

const handleRightClick = (row, column, event) => {
  console.log("handleRightClick", row, column, event);
};

onMounted(() => {});
</script>

<style scoped>
@import "./style.css";
</style>
